/**
memo也就收第二个参数,一个回调函数
这个函数接受两个参数,分别是之前和当前的组件接受的属性对象
你可以根据比较这两个对象,来决定是否让子组件更新
返回true表示两次属性是一样的，不需更新
反之返回false则会更新*/
//@ts-nocheck
import React, {useEffect, useState,memo} from 'react';

const _Child = (props: any) => {
  console.log('Child');
  return (
    <div>{JSON.stringify(props.x)}</div>
  )
};

const Child = memo(_Child, (prev, cur) => {
  console.log('prev:', prev);
  console.log('cur:', cur);
  return (prev.x.name === cur.x.name && prev.x.age === cur.x.age);
});

export default () => {
  const [state, setState] = useState({name: 'ahhh', age: 123});

  return (
    <div>
      <Child x={state}/>
      <button onClick={() => {
        setState({...state, name: 'ahhh1'})
      }}>button
      </button>
    </div>
  );
};
